<template>
  <el-dialog title="分配角色" :visible.sync="showSetRoleDialog" width="50%" @close="closeDialog">
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id" @change="changeSelected">
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="postRole">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getRole } from '@/api/setting'
import { getUserDetailById } from '@/api/user'
import { setRole } from '@/api/employee'
export default {
  props: {
    showSetRoleDialog: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      default: ""
    }
  },
  data() {
      return {
          checkList: [],
          roleList: [],
          roleIds: []
      }
  },
  created() {
      this.getRoleList()
  },
  methods: {
      async getRoleList() {
      const res = await getRole(this.pageInfo);
      this.roleList = res.rows;
      console.log(res);
    },
    changeSelected() {
        console.log(this.checkList);
    },
    closeDialog() {
        this.$emit('update:showSetRoleDialog', false)
    },
    async getUserDetail(id) {
        // props 传值是异步的，不能直接用传过来的userId，须在父组件钟通过$refs里调用子组件的方法
        const res = await getUserDetailById(id)
        console.log(res);
        this.checkList = res.roleIds
    },
    async postRole() {
        await setRole({ id: this.userId, roleIds: this.checkList })
        this.$emit('update:showSetRoleDialog', false)
    }
  }
};
</script>
